<template>
  <div class="table-all">
    <a-spin :spinning="spinning1"/>
    <a-table :columns="columns" 
    :data-source="data" 
    :scroll="{ x: 1500, y: 600 }" 
    :pagination="pagination" 
    @change="handleTableChange"
    :customRow='Rowclick'>
      <template #action="{ record }">
        <!-- <a-popconfirm
          v-if="data.length"
          okText="通过"
          cancelText="不通过"
          title="确定审核通过吗？"
          @confirm="onShenHe(record)"
        
        >
          <template #slot>
              
          </template>
        
        </a-popconfirm> -->
        <a @click="confirm(record)">审核</a>
      </template>
      <template  #state="{ text }">
        <a-tag color="#2db7f5" v-if="text == '-1'">未审核</a-tag>
        <a-tag color="#87d068" v-if="text == '0'">已通过</a-tag>
        <a-tag color="#f50" v-if="text == '1'">未通过</a-tag>
      </template>
      <template  #date="{ text }">
          <span>{{text}}</span>
      </template>
    </a-table>
  </div>

 


    
</template>
<script>

import {  ref } from 'vue';
import {request} from "../../utils/request";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
import { notification } from 'ant-design-vue';           
import moment from "moment";


const handleTableChange = pageNumber => {
  console.log('Page: ', pageNumber);
};
const pagination = {
  total: 200,
  current : 1,
  pageSize: 20
}

const columns = [
  {
    title: 'id',
    width: 50,
    dataIndex: 'id',
    key: '1',
    fixed: 'left',
  },
  {
    title: '项目名称',
    width: 200,
    dataIndex: 'pjName',
    key: '2',
    fixed: 'left',
  },
  {
    title: '供应商名称',
    width: 150,
    dataIndex: 'provideName',
    // key: 'provideName',
    // fixed: 'left',
  },
  {
    title: '物料名称',
    dataIndex: 'name',
    key: '3',
    width: 150,
  },
  {
    title: '报价金额',
    dataIndex: 'money',
    key: '4',
    width: 150,
  },
  {
    title: '创建日期',
    dataIndex: 'date',
    key: '5',
    width: 150,
    slots: {
      customRender: 'date'
    }
  },
  {
    title: '批次',
    dataIndex: 'batch',
    key: '6',
    width: 150,
  },
  {
    title: '数量',
    dataIndex: 'number',
    key: '7',
    width: 150,
  },
  {
    title: '状态',
    width: 200,
    dataIndex: 'state',
    key: 'state',
    slots: {
      customRender: 'state'
    }
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
    slots: {
      customRender: 'action',
      slots: {
        customRender: 'slot'
      }
    },
  },
];
const data = [];
let columnIndex = 0;
let columnId = 0;
const visible = ref(false);
// for (let i = 0; i < 100; i++) {
//   data.push({
//     key: i,
//     name: `Edrward ${i}`,
//     age: 32,
//     address: `London Park no. ${i}`,
//   });
// }

export default ({
  data() {
    return {
      data,
      columns,
      columnIndex,
      columnId,
      visible,
      spinning1: true,
      pagination,
      handleTableChange
    };
  },
  mounted() {
      this.init();
  },
  methods: {
    init() {
      request({
          url: 'custom/findAll',
          method:"get"
      }).then((res)=>{
        if(res.code == 200) {
          this.data = [];
          
          this.spinning1 = false;
          this.pagination.total = res.data.total;
          // this.pagination.total =200;
          this.pagination.current = res.data.current;
          const dataResult = res.data.records;
          
          for (let i = 0; i < dataResult.length; i++) {
            this.data.push({
              key: i,
              id: dataResult[i].id,
              pjName: dataResult[i].pjName,
              provideName: dataResult[i].provideName,
              name: dataResult[i].name,
              money: dataResult[i].money,
              date: moment(dataResult[i].date).format("YYYY-MM-DD HH:mm:ss"),
              batch: dataResult[i].batch,
              number: dataResult[i].number,
              state: dataResult[i].state
            });
          }
        }
        
        
      })
    },

    Rowclick(record) {
      return {
        onclick:(event)=> {
         
           console.log('点击行内容record' +  JSON.stringify(record))
        
        }
      }
    },
    // onShenHe(record) {
    //  
    //   columnId = record.id
     
    // }
    confirm(record) {
      const that = this;
       Modal.confirm({
        title: '确定要审核通过吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode(
          'div',
          {
            style: 'color:red;',
          },
        ),
        okText: '通过',
        cancelText: '不通过',
        onOk() {
          columnId = record.id;
            request({
                url: 'custom/audit',
                data:{
                    id: columnId,
                    state: "0"
                },
                method:"post"
            }).then((res)=>{
               
                if(res.code == 200) {
                  that.init();
                  that.spinning1 = true;
                  notification.open({
                    message: '审核成功',
                    duration: 0,
                  });
                 
                }
            })
        },

        onCancel() {
          columnId = record.id;
            request({
                url: 'custom/audit',
                data:{
                    id: columnId,
                    state: "1"
                },
                method:"post"
            }).then((res)=>{
                 if(res.code == 200) {
                  that.init();
                  that.spinning1 = true;
                  notification.open({
                    message: '审核成功',
                    duration: 0,
                  });

                }
            })
        },

        class: 'test',
      });
     
    },
     
  }
});
</script>

<style lang="scss" scoped>
  .table-all {
    width: 100%;
    height: 700px;
    text-align: center;
    line-height: 700px;
    overflow: hidden;
   
  }
</style>